<template>
  <view class="container">
    <!-- 背景图案 -->
    <view class="background-pattern"></view>

    <!-- 输入标题 -->
    <text class="title">输入股票代码</text>

    <!-- 输入框 -->
    <input class="stock-input" placeholder="000001" v-model="stockCode"/>

    <!-- 标签 -->
    <view class="tag"></view>

    <!-- 确定按钮 -->
    <button class="confirm-button" @click="startPrediction">确定</button>

    <!-- 遮罩 -->
    <view v-if="showMask" class="mask">
      <view class="loading-spinner"></view>
      <text class="loading-text">预测中...</text>
    </view>

    <!-- 底部提示 -->
    <text class="footer-text">*小程序不提供任何投资建议，预测结果仅作参考。投资有风险，入市需谨慎。</text>
  </view>
</template>

<script>
import {host, stockInfo} from "../../../common/constants.js"
export default {
  data() {
    return {
      showMask: false,
	  stockCode: ''
    };
  },
  methods: {
	twoDecimal(num){
	  let multiplied = num * 100;
	  let rounded = Math.round(multiplied);
	  return rounded / 100
	},
    startPrediction() {
      // console.log(23333)
	  if(this.stockCode === undefined || this.stockCode === '') {
		  uni.showToast({
		  	title: "请输入股票代码",
			icon: "error"
		  })
		  return
	  }
      this.showMask = true;
	  let that = this
	  uni.request({
	  	url: host + "/api/test",
		method: "GET",
		data: {
			stock_code: that.stockCode
		},
		success: (data) => {
			console.log(data)
			if(data.statusCode !== 200) {
				this.showMask = false
				uni.showToast({
					title: "股票代码有误",
					icon: "error"
				})
			}
			let res = data.data.data
			let high = []
			let low = []
			let predictHigh = []
			let predictLow = []
			
			let actual = []
			let predict = []
			let date = []
			
			for(let i=res.close.length - 30; i<res.close.length; i++) {
				
				date.push(res.trade_date[i])
				predictHigh.push(that.twoDecimal(res.predict_high[i]))
				predictLow.push(that.twoDecimal(res.predict_low[i]))				
				predict.push(that.twoDecimal((res.predict_high[i] + res.predict_low[i]) / 2))
				if (i >= res.predict_high.length - 3) continue
				high.push(that.twoDecimal(res.high[i]))
				low.push(that.twoDecimal(res.low[i]))
				actual.push(that.twoDecimal((res.high[i] + res.low[i]) / 2))
			}
			let result = {
				predict, actual, high, low, predictHigh, predictLow, date
			}
			uni.setStorageSync('result', JSON.stringify(result));
			uni.setStorageSync('code', data.data.meta.ts_code);
			uni.setStorageSync('name', data.data.meta.name);
			// uni.setStorageSync('predict', JSON.stringify(predict));
			// uni.setStorageSync('actual', JSON.stringify(actual));
			// uni.setStorageSync('predictHigh', JSON.stringify(predictHigh));
			// uni.setStorageSync('predictLow', JSON.stringify(predictLow));
			// uni.setStorageSync('high', JSON.stringify(high));
			// uni.setStorageSync('low', JSON.stringify(low));
			// uni.setStorageSync('date', JSON.stringify(date));
			console.log(result)
			
			this.showMask = false;
			uni.navigateTo({
			  url: '/subpages/predict/linear/linear' // 跳转到对应路径的页面
			});
		
		},
		fail: (res) => {
			this.showMask = false
			uni.showToast({
				title: "股票代码有误",
				icon: "error"
			})
		}
	  })
      
    },
  }
};
</script>


<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
}


.background-pattern {
  position: absolute;
  top: 20%;
  width: 80%;
  height: 50%;
  background-image: url('/static/uni.png'); /* 请替换为你的背景图案路径 */
  background-size: cover;
  opacity: 0.1;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  z-index: 1;
}

.stock-input {
  width: 80%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 10px;
  margin-bottom: 20px;
  z-index: 1;
}

.tag {
  /* background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 15px; */
  padding: 5px 10px;
  margin-bottom: 20px;
  z-index: 1;
}

.confirm-button {
  width: 80%;
  height: 50px;
  background-color: #28a745;
  color: #ffffff;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.footer-text {
  font-size: 12px;
  color: #888;
  margin-top: 20px;
  text-align: center;
  z-index: 1;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //background-color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.84);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
